<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:49:14
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-23 19:32:24
 * @FilePath: /tea-garden-web/src/pages/overview/subject-pick.vue
 * @Description: 专题-采摘预测
-->
<template>
  <div class="subject-pick">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <span class="module-name">采摘预测</span>
      <div class="subject-content">
        <div class="pickBox"  v-for="(item,index) in results" :key="index">
          <div class="pickBoxTit">{{ item.name }}</div>
          <div class="pickBoxContent">{{ item.date }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/util/http.js'

export default {
  data () {
    return {
      pickData: '',
      results: ''
    }
  },
  watch: {},
  computed: {},
  methods: {
    async getList () {
      get({ url: '/harvestforecast/list' }).then((res) => {
        console.log(res.data[0])
        this.pickData = res.data[0]
        this.results = this.convertTextToArray(this.pickData.results)
      })
    },
    convertTextToArray (text) {
      // 分割文本，获取每种茶叶的信息
      console.log(text)

      const teaInfos = text.split(';')

      // 初始化结果数组
      const result = []

      // 遍历每种茶叶的信息
      teaInfos.forEach((teaInfo) => {
        if (teaInfo.trim() === '') {
          // 跳过空字符串
          return
        }

        // 分割茶叶名称和日期
        const [name, date] = teaInfo.split('的预测采摘期为从')

        // 去除日期字符串两端的空格，并用' 至 '替换中间的'至'以匹配您的要求
        const formattedDate = date.trim().replace('至', ' 至 ')

        // 创建对象并添加到结果数组中
        result.push({ name: `${name}的预测采摘期`, date: formattedDate })
      })

      // 返回结果数组
      console.log(result)

      return result
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-pick {
  width: 308px;
  height: 780px;
  margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
  }
}
.pickBox {
  width: 272px;
  height: 113px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.08);
  border-radius: 8px 8px 8px 8px;
  padding: 10px;
  margin-bottom: 12px;
  .pickBoxTit {
    height: 42px;
    border-bottom:1px solid #f1f2f4 ;
    color: #089BAB;
  }
  .pickBoxContent {
    margin-top: 12px;
    font-size: 16px;
color: #000000;
  }
}
</style>
